<script setup lang="ts">
defineProps<{
  reverseDirection?: boolean,
  isNew?: string,
  goodName: string,
  goodInfo: string,
  priceInfo?: string,
  buyInfo?: string,
  imgSrc: string
}>()
</script>

<template>
  <div class="goodbriefcontainer _goodbriefcontainer">
    <div :class="{ reverse: reverseDirection ? true : false }">
      <div>
        <h3>{{ (isNew === 'yes') ? '新款' : '' }}</h3>
        <h1>{{ goodName }}</h1>
        <h2>{{ goodInfo }}</h2>
        <h4>{{ priceInfo }}</h4>
        <h5>{{ buyInfo }}</h5>
        <p>进一步了解</p>
      </div>
      <div>
        <img :src="imgSrc" alt="">
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.reverse {
  flex-direction: row-reverse;
}

// 大于800px
@media only screen and (min-width: 800px) {
  .goodbriefcontainer {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 30px 0;
    height: 500px;
    background-color: black;

    div {
      max-width: 1000px;
      display: flex;
      // flex-direction: row-reverse;
      justify-content: space-around;
      align-items: center;
      width: 100%;

      div:nth-child(1) {
        padding: 0 100px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 50%;
        color: white;

        h3 {
          color: rgb(234, 94, 0);
        }

        p {
          color: rgb(12, 106, 205);
        }
      }

      div:nth-child(2) {
        display: flex;
        align-items: center;
        width: 50%;

        img {
          width: 350px;
          height: auto;
        }

      }

    }

  }
}

// 小于800px
@media only screen and (max-width: 799px) {
  ._goodbriefcontainer {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: black;
    padding-top: 6vw;
    margin-top: 20px;

    div {
      max-width: 1000px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      margin-bottom: 20px;

      div:nth-child(1) {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 30%;
        padding: 0 2.667vw;
        text-align: left;
        color: white;

        h3 {
          color: rgb(234, 94, 0);
        }

        h1 {
          font-size: 4.167vw;
          font-weight: 600;
        }

        h2 {
          font-size: 3.667vw;
        }

        p {
          color: rgb(12, 106, 205);
        }
      }

      div:nth-child(2) {
        display: flex;
        align-items: center;
        width: 50%;

        img {
          width: 100%;
          height: auto;
        }

      }

    }

  }
}
</style>
